<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期</title>
</head>

<body>

    <div id="app">
        <div class="list">
            <div v-for="item in user" :key="item.login" class="list-itme">
                <img :src="item.avatar_url" alt="" srcset="">
                <div>{{item.login}}</div>
            </div>
        </div>




    </div>



    <script src="../vue.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.4/axios.js"></script>
    <script>

        let app = Vue.createApp({
            data() {
                return {
                    user: []
                }
            },
            methods: {
                getdata() {
                    console.log("实例处理完所有与状态相关的选项后调用");
                },
                getapi() {
                    let search = "demo"
                    axios.get(`https://api.github.com/users?q=${search}`).then(res => {
                        this.user = res.data
                    })
                }

            },
            // 初始化完成之后立即调用
            beforeCreate() {
                console.log("初始化完成之后");
                // console.log(this);  // 初始化，还没有this

            },
            //实例处理完所有与状态相关的选项后调用
            created() {
                this.getdata()
                console.log(this);
                // 我个人想法， 在这里获取数据
                this.getapi()

            },
            // 组件前
            beforeMount() {
                console.log("组件挂载前");
            },
            // 组件后
            mounted() {
                console.log("组件挂载后");
            },
            //响应式状态变更而更新其 DOM 树之前调用
            beforeUpdate() {
                console.log("响应式状态变更而更新其 DOM 树之 前 调用");
            },
            //响应式状态变更而更新其 DOM 树之后调用
            updated() {
                console.log("响应式状态变更而更新其 DOM 树之 后 调用");
            },
            // 组件卸载前
            beforeUnmount() {

            },
            //组件卸载后
            unmounted() {

            }
        })
        app.mount("#app")




    </script>


    <style lang="less">
        img {
            width: 300px;
            height: 150px;
        }

        .list {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            justify-content: space-around;
        }

        .list-item {
            width: 300px;
            margin: 10px;
        }
    </style>





</body>

</html>